<template>
    <div class="app">
        <div class="top">
            <div class="left"><el-input v-model="pageQuery.search" style="width: 240px" placeholder="请输入角色名称、key等查询" />
            </div>
            <div class="button"> <el-button type="primary" @click="getPage">查询</el-button></div>
            <div class="right"><el-button type="success" @click="openAddOne">新增</el-button></div>
        </div>
        <div class="middle">
            <div style="border-radius: 15px; overflow: hidden; background-color: white;">
            <el-table :data="formData" stripe style="width: 100%" max-height="520">
                <el-table-column align="center" prop="userName" label="用户账号" width="250" />
                <el-table-column align="center" prop="nickName" label="用户名称" width="150" />
                <el-table-column align="center" prop="roleName" label="角色名称" width="200" />
                <el-table-column align="center" prop="roleKey" label="角色编码" width="150" />
                <el-table-column align="center" prop="createTime" label="创建时间" width="200" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="warning" size="small" @click="openDelOne(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </div>
        <div class="buttom">
            <div>
                <el-pagination v-model:current-page="pageQuery.pageNum" v-model:page-size="pageQuery.pageSize"
                    :page-sizes="[100, 200, 300, 400]" :size="size" :background="false"
                    :default-page-size="pageQuery.pageSize" layout="sizes, prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

                <!-- <el-pagination v-model:current-page="NowPage" :small="false" :disabled="disabled" :background="true"
                :default-page-size="PageSize" layout="prev, pager, next, jumper" :total="total"
                @current-change="PageNumChange" /> -->

            </div>
        </div>




        <el-dialog v-model="delOneDialogVisible" title="警告！" width="500" :before-close="handleClose">
            <span>确定删除这个({{ delProp.roleName }},{{ delProp.roleKey }})角色么？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" @click="delOneDialogVisible = false">算了吧</el-button>
                    <el-button type="danger" @click="delOneDialogVisible = false, delOne()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="addOneDialogVisible" title="新增" width="500" :before-close="handleClose">

            <el-form :model="form" label-width="auto" style="max-width: 400px">
                <el-form-item label="用户:">
                    <el-select v-model="form.userId" placeholder="请选择用户..." style="width: 240px" filterable>
                        <el-option v-for="item in users" :key="item.id" :label="item.nickName" :value="item.id">
                            <span style="float: left">{{ item.nickName }}</span>
                            <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">
                                {{ item.userName }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色:">
                    <el-select v-model="form.roleId" placeholder="请选择角色..." style="width: 240px" filterable>
                        <el-option v-for="item in roles" :key="item.id" :label="item.roleName" :value="item.id">
                            <span style="float: left">{{ item.roleName }}</span>
                            <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">
                                {{ item.roleKey }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addOneDialogVisible = false">算了吧</el-button>
                    <el-button type="success" @click="addOneDialogVisible = false, addOne()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>




    </div>







</template>


<script setup>

import { onMounted, ref, reactive } from 'vue';
import Api from '@/js/api/user/UserRoleApi';
import userApi from '@/js/api/user/UserApi';
import roleApi from '@/js/api/user/roleApi';
import { ComponentSize, ElMessageBox, ElMessage } from 'element-plus'


const pageQuery = reactive({
    pageNum: 1,
    pageSize: 10,
    search: '',
});

const size = ref < ComponentSize > ('default')

const formData = ref('');

const total = ref();

onMounted(() => {
    getPage();
    getUsers();
    getRoles();
})

const getPage = () => {
    Api.getPage(pageQuery).then((result) => {
        total.value = Number(result.total);//为了保证精度，所有的Long都以String方式返回，记得转换
        formData.value = result.records;
        console.info(total.value)
    }).catch((err) => {
        console.error(err);
    });
}

const handleSizeChange = (prop) => {
    pageQuery.pageSize = prop;
    getPage();
}

const handleCurrentChange = (prop) => {
    pageQuery.pageNum = prop;
    getPage();
}


const delOneDialogVisible = ref(false);
const delProp = reactive({
    id: '',

    roleName: '',
    roleKey: '',
})

const openDelOne = (prop) => {
    delOneDialogVisible.value = true;
    delProp.id = prop.id;
    delProp.roleName = prop.roleName;
    delProp.roleKey = prop.roleKey;
}


const handleClose = () => {
    ElMessageBox.confirm('确定关闭么？')
        .then(() => {
            delOneDialogVisible.value = false;
        })
        .catch(() => {
            // catch error
        })
}
const delOne = () => {
    Api.delOne(delProp.id).then((res) => {
        if (res) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getPage();
        }
    }).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })

    })
}



//新增的逻辑
const addOneDialogVisible = ref(false);
const openAddOne = () => {
    addOneDialogVisible.value = true;
}

const users = ref('');
const roles = ref('');

const form = reactive({
    userId: '',
    roleId: '',
})

const getUsers = () => {
    userApi.getList().then((res => {

        if (res) {
            users.value = res;
        }
    })).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })
    })
}

const getRoles = () => {
    roleApi.getList().then((res => {
        if (res) {
            roles.value = res;
        }
    })).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })
    })
}

const addOne = () => {
    Api.addOne(form).then((res) => {
        if (res) {
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
            cleanForm();
            getPage();
        }
    }).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })

    })
}

const cleanForm = () => {
    form.roleId='';
    form.userId='';
}

</script>

<style scoped src="./css/common.css">


</style>
